<template>
  <a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'pic'">
        <a-popover placement="right">
          <template #content>
            <img width="150" :src="`http://localhost:2703/${record.pic}`" alt="图片" />
          </template>
          <img width="50" :src="`http://localhost:2703/${record.pic}`" alt="图片" />
        </a-popover>
      </template>
      <template v-if="column.key === 'status'">
        <a-button v-if="record.status">开启</a-button>
        <a-button v-else>关闭</a-button>
      </template>
    </template>
  </a-table>
</template>
<script setup name="BannerList">
import { getBannerList } from '@/api/home'
import columns from './config/table'
console.log(columns)
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const data = ref([])

const getList = () => {
  getBannerList({ page: page.value, limit: limit.value })
    .then((res) => {
      data.value = res.data.map((item) => ({ ...item, pic: item.pic.slice(7) }))
      total.value = res.total
    })
    .catch((e) => {
      console.log(e)
    })
}
getList()

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name
  })
}
</script>
